<template>
    <div class="comp-market-info">
        <div class="info-list fn-clearfix">
            <div class="item">
                <div class="item-value"
                     :class="{'fn-color-buy':currentPrice>lastPrice||((currentPrice==lastPrice)&&(type==='BUY')),
                            'fn-color-sell':currentPrice<lastPrice||((currentPrice==lastPrice)&&(type==='SELL'))}">
                    {{currentPrice}}
                    <span class="fn-white">{{$$symbol.split('_')[0]}}</span>
                </div>
                <div class="item-label">{{$t('common.comp.marketInfo.lastTradePrice')}}</div>
            </div>
            <div class="item">
                <div class="item-value" :class="{'fn-color-sell':changeRatio<0 , 'fn-color-buy':changeRatio>0}">
                    {{changeRatio + '%'}}
                </div>
                <div class="item-label">{{$t('common.comp.marketInfo.dayPrice')}}</div>
            </div>
            <div class="item">
                <div class="item-value">{{highPrice}}</div>
                <div class="item-label">{{$t('common.comp.marketInfo.dayHigh')}}</div>
            </div>
            <div class="item">
                <div class="item-value">{{lowPrice}}</div>
                <div class="item-label">{{$t('common.comp.marketInfo.dayLow')}}</div>
            </div>
            <div class="item">
                <div class="item-value">{{cumulative}}<span
                        class="fn-white">{{$$symbol.split('_')[1]}}</span></div>
                <div class="item-label">{{$t('common.comp.marketInfo.dayVolume')}}</div>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
    import commonService from '../common/commonService';
    import filter from '../../grsc-base/util/filter';

    export default {
        components: {},
        data() {
            return {
                filter: filter,
                //行情信息变量
                currentPrice: '--',//最新成交价
                lastPrice: 0,//上一成交价
                exchangePrice: 0,
                highPrice: '--',//最高价
                lowPrice: '--',//最低价
                changeRatio: '--',//涨幅
                cumulative: '--',//累计成交量
                yesterdayPrice: 0,//24小时前价格
                type: 'BUY',//买卖方式

                order: null

            };
        },
        props: {
            wsSymbol: {
                type: String,
                default: ''
            }
        },
        created() {
            this.fetchInfo();

            $(document).off('$$pan.MarketInfo').on('$$pan.MarketInfo', () => {
                this._loopTradeOnce();
            });
        },

        methods: {

            _loopTradeOnce() {
                commonService.loopTradeInfo({
                    symbol: this.wsSymbol
                }).done(rep => {
                    this._doResult(rep);
                });
            },

            _doResult(rep) {
                let that = this;
                //最新价
                if (rep) {
                    let pr_ne = rep['order'] && rep['order'][0].price; // 最新價
                    let pr_op = rep['24Price'];

                    this.highPrice = filter.floorFixPrice(rep['24high'], that.$$coinPrecision);//最高价
                    this.lowPrice = filter.floorFixPrice(rep['24low'], that.$$coinPrecision);//最低价
                    this.cumulative = filter.floorFix(rep['24Total'], that.$$amountPrecision);//累计
                    this.currentPrice = filter.floorFixPrice(pr_ne, that.$$coinPrecision);
                    this.type = rep['order'] && rep['order'][0].type;

                    if (rep['order'] && rep['order'][1]) {
                        this.lastPrice = rep['order'][1].price;
                        this.exchangePrice = filter.floorFix(1 / this.lastPrice, 8);
                    }

                    //修改涨幅向下取整的问题
                    let distance = pr_ne - pr_op;
                    let symbol = 1;
                    if (distance < 0) {
                        symbol = -1
                    }                   
                    if (pr_op == 0) {
                        that.changeRatio = filter.floorFix(0,2);
                    } else {
                        that.changeRatio = filter.floorFix(symbol * (filter.abs(distance) / pr_op * 100), 2);
                    }
                }
            },

            fetchInfo(){
                let that = this;
                commonService.onLoopTradeInfo(rep => {
                    this._doResult(rep);
                }, {
                    symbol: this.wsSymbol
                });
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    @import "../scss/base/var";

    .comp-market-info {
        line-height: 1.5;
        color: #fff;
        font-size: 12px;
        .info-list {
            .item {
                box-sizing: border-box;
                float: left;
                margin-left: 16px;
                height: $height-nav;
                padding: 8px 0;
                &:first-child {
                    margin-left: 0;
                }
                .item-value {

                }
                .item-label {
                    color: #626364;
                }

                .font-green {
                    color: #4a9f3a;
                }

                .font-red {
                    color: #f9504b;
                }
            }
        }
    }
</style>